<template>
  <div class="upload">
    <div class="uploadBtn">
      <el-upload
        accept="video/*"
        :action="action"
        class="uploadBox"
        :data="otherData"
        :disabled="videoList.length >= 1"
        :limit="videoLimit"
        :multiple="false"
        :on-success="uploadVideo"
        :show-file-list="false"
      >
        <el-button
          :disabled="videoList.length >= 1 || videoLimit < 1"
          plain
          type="primary"
        >
          上传视频
        </el-button>
      </el-upload>
      <el-upload
        accept="image/*"
        :action="action"
        class="uploadBox"
        :data="otherData"
        :multiple="false"
        :on-success="uploadImage"
        :show-file-list="false"
      >
        <el-button plain type="primary">上传图片</el-button>
      </el-upload>
    </div>
    <div class="uploadList">
      <div v-for="item in videoList" :key="item" class="box">
        <div class="mediaOut" @click="lookMedia(item, 'video')">
          <video alt="" disablePictureInPicture :src="item" />
          <vab-icon icon="play-circle-line" />
        </div>
        <div class="icons">
          <vab-icon icon="delete-bin-line" @click="deleteVideo(item)" />
          <vab-icon icon="download-cloud-2-line" @click="download(item)" />
        </div>
      </div>
      <div v-for="item in imageList" :key="item" class="box">
        <div class="mediaOut">
          <el-image alt="" :preview-src-list="imageList" :src="item" />
        </div>
        <div class="icons">
          <vab-icon icon="delete-bin-line" @click="deleteImage(item)" />
          <vab-icon icon="download-cloud-2-line" @click="download(item)" />
        </div>
      </div>
    </div>
    <el-dialog append-to-body :visible.sync="dialogVisible">
      <video controls disablePictureInPicture :src="dialogUrl" width="100%" />
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from '@/utils/token'
  import { baseURL } from '@/config'
  import { downloadFile } from '@/utils/index'
  export default {
    name: 'MediaUpload',
    props: {
      image: {
        type: String,
        default: '',
      },
      video: {
        type: String,
        default: '',
      },
      videoLimit: {
        type: Number,
        default: 1,
      },
    },
    data() {
      return {
        otherData: {},
        action: baseURL + '/?s=App.Common_File.Upload',
        dialogUrl: '',
        dialogVisible: false,
        videoList: [],
        imageList: [],
      }
    },
    created() {
      this.otherData['access_token'] = getToken()
      this.videoList = this.video == '' ? [] : this.video.split(',')
      this.imageList = this.image == '' ? [] : this.image.split(',')
    },
    methods: {
      uploadVideo(res) {
        console.log(res)
        if (res.ret == 200) {
          this.videoList.push(res.data.url)
        } else {
          this.$baseMessage(
            res.msg ? res.msg : '上传失败',
            'error',
            'vab-hey-message-error'
          )
        }
        this.sendMedia()
      },
      uploadImage(res) {
        console.log(res)
        if (res.ret == 200) {
          this.imageList.push(res.data.url)
        } else {
          this.$baseMessage(
            res.msg ? res.msg : '上传失败',
            'error',
            'vab-hey-message-error'
          )
        }
        this.sendMedia()
      },
      lookMedia(item) {
        this.dialogUrl = item
        this.dialogVisible = true
      },
      deleteImage(item) {
        this.imageList.splice(this.imageList.indexOf(item), 1)
        this.sendMedia()
      },
      deleteVideo() {
        this.videoList = []
        this.sendMedia()
      },
      download(item) {
        downloadFile(item)
      },
      sendMedia() {
        var mediaData = {
          videoList: this.videoList,
          imageList: this.imageList,
        }
        this.$emit('onChange', mediaData)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .uploadBtn {
    display: flex;
    .uploadBox {
      width: 80px;
      margin: 0 10px 20px 10px;
    }
  }
  .uploadList {
    display: flex;
    flex-wrap: wrap;
    .box {
      width: 90px;
      height: 90px;
      margin: 0 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      .mediaOut {
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        i {
          position: absolute;
          color: #3f3f3f;
          font-size: 30px;
          top: calc(50% - 26px);
          left: calc(50% - 15px);
        }
        ::v-deep .el-image__inner {
          width: 90px;
          height: 90px;
          object-fit: cover;
        }
        video {
          width: 90px;
          height: 90px;
          object-fit: cover;
        }
      }
      .icons {
        background: rgba(255, 255, 255, 0.9);
        height: 25px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          margin: 0 8px;
          color: #6898fc;
          cursor: pointer;
        }
      }
    }
  }
</style>
